<template>
	<view :style="colorStyle" class="order_index">

		<view class="header">
			<view class="nav_bar">
				<view class="item" :class="active?'':'active'" @click="change(0)">购买订单</view>
				<view class="item" :class="active?'active':''" @click="change(1)">捐赠订单</view>
			</view>
			<input v-model="keyword" confirm-type="search" @focus="searchFocus" @confirm="inputConfirm"
				class="search_input" placeholder="请输入商品名称" placeholder-class="text--w111-999" />
		</view>

		<view class="tabs">
			<view class="item" :class="orderStatus === '' ? 'active' : ''" @click="statusClick('')">全部</view>
			<view class="item" :class="orderStatus === 0 ? 'active' : ''" @click="statusClick(0)">待付款</view>
			<view class="item" :class="orderStatus === 1 ? 'active' : ''" @click="statusClick(1)">待发货</view>
			<view class="item" :class="orderStatus === 2 ? 'active' : ''" @click="statusClick(2)">待收货</view>
			<view class="item" :class="orderStatus === 3 ? 'active' : ''" @click="statusClick(3)">待评价</view>
		</view>

		<scroll-view scroll-y class="scroll_view" @scrolltolower="getOrderList">
			<view class="list">
				<view class="order_card bg--w111-fff rd-24rpx pt-32 pb-32 pl-24 pr-24"
					v-for="(item, index) in orderList" :key="index"  @click="goOrderDetails(item.order_id)">
					<view class="flex-between-center">
						<view class="flex-y-center">
							{{item.pink_name}}
							<!-- <text class="iconfont icon-ic_rightarrow fs-24 text--w111-999"></text> -->

							<!-- <text v-if="item.pink_name"
								class="h-32 bg--w111-fff px-6 rd-6rpx fs-20 border_con font-num acea-row row-middle">
								{{item.pink_name}}
								</text>
							<text class="fs-28 lh-40rpx text--w111-333 pl-16">{{item._add_time}}</text> -->
						</view>
						<view class="fs-26">
							<view class="font-num">
								<text>{{item._status._title}}</text>
								<text v-if="item.refund.length">{{item.is_all_refund?'，退款中':'，部分退款中'}}</text>
							</view>
						</view>
					</view>
					<view class="mt-26" v-if="item.cartInfo.length && item.cartInfo.length == 1">
						<view class="flex justify-between" v-for="(items, i) in item.cartInfo" :key="i">

							<easy-loadimage mode="widthFix" :image-src="items.productInfo.image" width="136rpx"
								height="136rpx" borderRadius="16rpx"></easy-loadimage>
							<view class="flex-1 ml-20 other_view">
								<view class="w-346 fs-28 fw-bold text--w111-333 lh-40rpx line2">
									{{items.productInfo.store_name }}
								</view>
								<view class="other">
									<view class="price">
										<view class="unit">￥</view>
										<view class="value">{{item.pay_price}}</view>
									</view>
									<view class="total">X{{item.total_num}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="mt-26 relative" v-if="item.cartInfo.length && item.cartInfo.length > 1">
						<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-560" show-scrollbar="false">
							<view class="inline-block mr-16" v-for="(items,i) in item.cartInfo" :key="i">
								<easy-loadimage mode="widthFix" :image-src="items.productInfo.image" width="136rpx"
									height="136rpx" borderRadius="16rpx"></easy-loadimage>
							</view>
						</scroll-view>
						<view class="abs-rt h-136 flex-col flex-center">
							<baseMoney :money="item.pay_price" symbolSize="20" integerSize="32" decimalSize="20"
								incolor="#333333" weight></baseMoney>
							<view class="fs-24 text--w111-999 lh-34rpx text-right">共{{item.total_num}}件</view>
						</view>
					</view>

					<view class="status_view">
						<view class="item"
							v-if="item._status._type == 0||item._status._type == 1||item._status._type == 2"
							@tap.stop="showModalChange(item.order_id, 3)">
							取消订单
						</view>
						<view class="item active" v-if="item._status._type == 0" @click.stop="goPay(item.order_id)">
							立即支付
						</view>
						<view class="item" v-if="item._status._type == 2">查看物流</view>
						<view class="item active" v-if="item._status._type == 2">确认收货</view>
						<view class="item" v-if="item._status._type == 3" @click.stop="goOrderDetails(item.order_id)">
							去评价
						</view>
					</view>
				</view>
				<block v-if="orderList.length == 0 && !loading">
					<emptyPage title="暂无订单信息～"
						:src="keyword ? '/statics/images/noSearch.gif' : '/statics/images/noOrder.gif'"></emptyPage>
				</block>
				<view class="loadingicon flex-center" v-if="orderList.length > 0">
					<text class="loading iconfont icon-ic_Refresh" :hidden="loading == false"></text>
					<text class="fs-26 pb-32">{{ loadTitle }}</text>
				</view>
			</view>
		</scroll-view>
		<tuiModal :show="showModal" :title="modalTitle" :content="modalContent" :maskClosable="false"
			@click="handleClick" @cancel="hideModal"></tuiModal>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
import {
    getOrderList,
    orderData,
    orderCancel,
    orderDel
} from '@/api/order.js';
	import {
		openOrderSubscribe
	} from '@/utils/SubscribeMessage.js';
	import tuiModal from "@/components/tui-modal/index.vue"
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import emptyPage from '@/components/emptyPage.vue';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			emptyPage,
			tuiModal
		},
		mixins: [colors],
		data() {
			return {
				active: 0,

				sysHeight: sysHeight,
				loaded: false,
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				orderList: [], //订单数组
				orderData: {}, //订单详细统计
				orderStatus: '', //订单状态
				orderType: '', //订单类型
				page: 1,
				limit: 20,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				keyword: '',
				focus: false,
				// 搜索历史
				historyList: [],
				// 临时搜索列表
				tempStorage: [],
				//确认模态框
				showModal: false,
				modalTitle: '',
				modalContent: '',
				modalType: 0,
				orderId: ''

			};
		},
		computed: {
			...mapGetters(['isLogin']),
			fixedTop() {
				// #ifdef MP || APP-PLUS
				return this.sysHeight + 'px'
				// #endif
				return this.data
				// #ifndef MP
				return 0
				// #endif
			}
		},
		onShow() {
			uni.removeStorageSync('form_type_cart');
			this.page = 1;
			this.loadend = false;
			this.orderList = [];
			if (this.isLogin) {
				this.getFun();
			} else {
				toLogin()
			}
		},
		onPageScroll(object) {
			uni.$emit('scroll');
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
        onLoad(options) {
			if (options.status) this.orderStatus = (options.status == undefined && options.status != 0) ? '' : parseInt(
				options.status);
			if (options.type) this.orderType = (options.type == undefined && options.type != 0) ? '' : parseInt(
				options.type);
		},
		methods: {
			change(value) {
				if (this.active == value) return
				this.active = value;

				this.loadend = false;
				this.page = 1;
				this.$set(this, 'orderList', []);
				this.getOrderList();

			},
			delHistory() {
				this.tempStorage = []
				this.historyList = []
				uni.setStorageSync('orderHistoryList', this.tempStorage);
			},
			getFun() {
				this.getOrderData();
				this.getOrderList();
			},
			onLoadFun() {
				this.getFun();
				this.isShowAuth = false;
			},
            
			/**
			 * 获取订单统计数据
			 *
			 */
			getOrderData: function() {
				let that = this;
				orderData({
					type: this.orderType,
					search: this.keyword
				}).then(res => {
					that.$set(that, 'orderData', res.data);
				});
			},
			showModalChange(orderId, type) {
				this.orderId = orderId;
				this.modalType = type;
				if (type == 1) {
					this.modalTitle = '确认收货';
					this.modalContent = '为保障权益，请收到货确认无误后，再确认收货';
				} else if (type == 2) {
					this.modalTitle = '删除订单';
					this.modalContent = '确定删除该订单?';
				} else if (type == 3) {
					this.modalTitle = '温馨提示';
					this.modalContent = '确认取消该订单?';
				}
				this.showModal = true;
			},
			handleClick(e) {
				let index = e.index;
				if (index == 1) {
					if (this.modalType == 1) {
						orderTake(this.orderId).then(res => {
							this.showModal = false;
							this.goSearch('');
							this.getOrderData();
						}).catch(err => {
							return this.$util.Tips({
								title: err
							});
						})
					} else if (this.modalType == 2) {
						orderDel(this.orderId).then(res => {
							this.showModal = false;
							this.goSearch('');
							this.getOrderData();
						})
					} else if (this.modalType == 3) {
						this.showModal = false;
						orderCancel(this.orderId).then(() => {
							this.goSearch('');
							this.getOrderData();
						})
					}
				} else {
					this.showModal = false;
				}

			},
			hideModal() {
				this.showModal = false;
			},
			/**
			 * 取消订单
			 *
			 */
			cancelOrder: function(index, order_id) {
				let that = this;
				if (!order_id)
					return that.$util.Tips({
						title: '缺少订单号无法取消订单'
					});
				orderCancel(order_id)
					.then(res => {
						return that.$util.Tips({
								title: res.msg,
								icon: 'success'
							},
							function() {
								that.orderList.splice(index, 1);
								that.$set(that, 'orderList', that.orderList);
								that.$set(that.orderData, 'unpaid_count', that.orderData.unpaid_count - 1);
								that.getOrderData();
							}
						);
					})
					.catch(err => {
						return that.$util.Tips({
							title: err
						});
					});
			},
			goPay: function(order_id) {
				uni.reLaunch({
					url: `/pages/goods/cashier/index?order_id=${order_id}&from_type=order`
				})
			},
			goOrderDetails: function(order_id) {
				if (!order_id)
					return that.$util.Tips({
						title: '缺少订单号无法查看订单详情'
					});
				// #ifdef MP
				uni.showLoading({
					title: '正在加载'
				});
				openOrderSubscribe()
					.then(() => {
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/goods/order_details/index?order_id=' + order_id
						})
					})
					.catch(err => {
						uni.hideLoading();
					});
				// #endif
				// #ifndef MP
				uni.navigateTo({
					url: '/pages/goods/order_details/index?order_id=' + order_id
				});
				// #endif
			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (this.loading) return
				if (status === this.orderStatus) return;
				this.orderStatus = status;
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'orderList', []);
				this.getOrderList();
			},
			searchFocus() {
				try {
					this.historyList = []
					this.tempStorage = []
					let arr = uni.getStorageSync('orderHistoryList')
					if (arr.length > 0) {
						this.historyList = Array.from(new Set(arr))
					} else {
						this.historyList = []
					}

					this.tempStorage = this.historyList
				} catch (e) {}
				this.focus = true;
			},
			goSearch(keyword) {
				this.loadend = false;
				this.loading = false;
				this.keyword = keyword;
				this.page = 1;
				this.orderList = [];
				this.getOrderList();
			},
			inputConfirm() {
				this.loadend = false;
				this.loading = false;
				this.page = 1;
				this.orderList = [];
				this.getOrderData();
				this.getOrderList();
				setTimeout(e => {
					let arr = this.tempStorage;
					if (this.keyword !== '') {
						arr.unshift(this.keyword);
						this.tempStorage = [...Array.from(new Set(arr))];
						uni.setStorageSync('orderHistoryList', this.tempStorage);
					}
				}, 1000)
			},
			/**
			 * 获取订单列表
			 */
			getOrderList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '加载更多';
				getOrderList({
						status: that.orderStatus,
						type: that.orderType,
						page: that.page,
						limit: that.limit,
						search: this.keyword,
						is_donation: this.active
					})
					.then(res => {
						let list = res.data || [];
						let loadend = list.length < that.limit;
						that.orderList = that.$util.SplitArray(list, that.orderList);
						that.$set(that, 'orderList', that.orderList);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
						that.page = that.page + 1;
						that.focus = false;
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = '加载更多';
					});
			},

			/**
			 * 删除订单
			 */
			delOrder: function(order_id, index) {
				let that = this;
				uni.showModal({
					title: '删除订单',
					content: '确定删除该订单',
					success: function(res) {
						if (res.confirm) {
							orderDel(order_id)
								.then(res => {
									that.orderList.splice(index, 1);
									that.$set(that, 'orderList', that.orderList);
									that.$set(that.orderData, 'unpaid_count', that.orderData
										.unpaid_count - 1);
									that.getOrderData();
									return that.$util.Tips({
										title: '删除成功',
										icon: 'success'
									});
								})
								.catch(err => {
									return that.$util.Tips({
										title: err
									});
								});
						} else if (res.cancel) {
							return that.$util.Tips({
								title: '已取消'
							});
						}
					}
				});

			},
			goPage(type, url) {
				if (type == 1) {
					uni.navigateTo({
						url
					})
				} else if (type == 2) {
					uni.switchTab({
						url
					})
				} else if (type == 3) {
					uni.navigateBack();
				}

			},
		},
		onReachBottom: function() {
			this.getOrderList();
		}
	};
</script>

<style scoped lang="scss">
	.order_index {
		height: 100vh;

		overflow: hidden;
	}

	.header {
		width: 100%;
		overflow: hidden;
		position: relative;
		background: #FFFFFF;
		padding: 0 32rpx;
		box-sizing: border-box;

		.nav_bar {
			height: 98rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.item {
				font-size: 36rpx;
				color: #777777;
				margin: 0 24rpx;

				&.active {
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}
			}
		}

		.search_input {
			width: 100%;
			height: 64rpx;
			background: #EDEDF3;
			border-radius: 64rpx 64rpx 64rpx 64rpx;
			font-weight: 400;
			font-size: 24rpx;
			padding: 0 28rpx;
			box-sizing: border-box;
		}
	}

	// .header {
	// 	width: 100%;
	// 	overflow: hidden;
	// 	position: relative;
	// 	background: #FFFFFF;
	// 	padding: 0 32rpx;
	// 	padding-top: var(--status-bar-height);
	// 	box-sizing: border-box;
	// 	.nav_bar {
	// 		height: 98rpx;
	// 		position: relative;
	// 		z-index: 2;

	// 		.back {
	// 			color: #333;
	// 			font-size: 34rpx;
	// 			position: absolute;
	// 			left: 0rpx;
	// 			top: 50%;
	// 			transform: translateY(-50%);
	// 		}

	// 		.title {
	// 			height: 98rpx;
	// 			display: flex;
	// 			justify-content: center;
	// 			align-items: center;

	// 			.item {
	// 				font-size: 36rpx;
	// 				color: #777777;
	// 				margin: 0 24rpx;

	// 				&.active {
	// 					font-weight: bold;
	// 					font-size: 36rpx;
	// 					color: #333333;
	// 				}
	// 			}


	// 		}
	// 	}

	// 	.search_input {
	// 		width: 100%;
	// 		height: 64rpx;
	// 		background: #EDEDF3;
	// 		border-radius: 64rpx 64rpx 64rpx 64rpx;
	// 		font-weight: 400;
	// 		font-size: 24rpx;
	// 		padding: 0 28rpx;
	// 		box-sizing: border-box;
	// 	}
	// }

	.tabs {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 32rpx 12rpx;
		box-sizing: border-box;
		background: #FFFFFF;

		.item {
			// flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			color: #777777;
			text-align: center;

			&.active {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				position: relative;

				&::after {
					content: "";
					width: 56rpx;
					height: 10rpx;
					background: #FF8133;
					border-radius: 5rpx 5rpx 5rpx 5rpx;

					position: absolute;
					left: 50%;
					bottom: 12rpx;
					transform: translateX(-50%);
				}
			}
		}
	}

	.scroll_view {
		height: calc(100vh - var(--status-bar-height) - 98rpx - 64rpx - 100rpx);
		padding: 20rpx 32rpx 0;
		box-sizing: border-box;
	}

	.other_view {
		display: flex;
		flex-direction: column;
		justify-content: space-between;


		.other {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price {
				display: flex;
				align-items: baseline;

				.unit {
					font-size: 24rpx;
					color: #333333;
				}

				.value {
					font-size: 40rpx;
					color: #333333;
				}
			}

			.total {
				font-size: 28rpx;
				color: #777777;
			}
		}
	}

	.status_view {
		margin-top: 24rpx;
		display: flex;
		justify-content: flex-end;

		.item {
			width: 152rpx;
			height: 60rpx;
			font-size: 24rpx;
			color: #777777;
			border: 1rpx solid #CCCCCC;
			box-sizing: border-box;
			border-radius: 16rpx;
			margin-left: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			&.active {
				color: #FFFFFF;
				background: linear-gradient(131deg, #FF8133 0%, #FF8133 100%);
				border: none;
			}
		}
	}

	.border_con {
		border: 1px solid var(--view-theme);
	}

	.border_ccc {
		border: 1rpx solid #ccc;
	}

	.active {
		color: var(--view-theme);
		font-weight: 500;
		font-size: 30rpx;
	}

	.abs-rt {
		position: absolute;
		top: 0;
		right: 0;
	}

	.order_card~.order_card {
		margin-top: 20rpx;

	}

	.btn~.btn {
		margin-left: 16rpx;
	}

	.uni-badge-left-margin {
		position: absolute;
		top: -16rpx;
		right: -30rpx;

		/deep/ .uni-badge--error {
			background-color: var(--view-theme) !important;
		}

		.uni-badge {
			color: var(--view-theme);
			border: 1px solid var(--view-theme);
			z-index: 29;
		}
	}
</style>